Week 4.1 
What are we covering this week? 
4.1 - DOM, Dynamic frontends, Connecting FE to BE 
4.2 - Chrome developer tools, Why frontend frameworks 


What have we covered until now 


Foundation 
Node.js and its runtime 
Databases (NoSQL/SQL) 


, 
ypescript beginner to advance 


Backend 


Backend communication protocols 
Express basic to advance 


ORMs 


Middlewares, routes, status codes, global catches 


Zod 

vionoRepos, turborepo 

Serverless Backends 

OpenAPI Spec 

Autogenerated clients 

Authentication using external libraries 
Scaling Node.js, performance benchmarks 
Deploying npm packages 


Frontend 

Reconcilers and Frontend frameworks 

React beginner to advance 

Internals of state, Context API 

State management using recoil 

CSS you need to know of, Flexbox, basic styling 
Frontend UI frameworks, Deep dive into Tailwind 
Containerization, Docker 

Next.js 

Custom hooks 

In house auth using next auth 


Basic Devops 

Docker end to end 
Deploying to AWS servers 
Newer clouds like fly/Remix 
Nginx and reverse proxies 


Projects 
GSoC Project setting up and issue solving 
Building Paytm/Wallet End to End 


Now we'll move on to the frontend, catching up with backend from time to time 


Foundation 


Foundation Javascript, async nature of JS 
Node.js and its runtime 

Databases (NoSQL/SQL) 

Mongo and Postgres deep dive 
Typescript beginner to advance 


Backend 


Backend communication protocols 

Express basic to advance 

ORMs 

Middlewares, routes, status codes, global catches 
Zod 

MonoRepos, turborepo 

Serverless Backends 

OpenAPI Spec 

Autogenerated clients 

Authentication using external libraries 
Scaling Node.js, performance benchmarks 
Deploying npm packages 


Internals of state, Context API 

State management using recoil 

CSS you need to know of, Flexbox, basic styling 
Frontend UI frameworks, Deep dive into Tailwind 
Containerization, Docker 

Next.js 

Custom hooks 

In house auth using next auth 


Basic Devops 

Docker end to end 
Deploying to AWS servers 
Newer clouds like fly/Remix 
Nginx and reverse proxies 


Projects 
GSoC Project setting up and issue solving 
Building Paytm/Wallet End to End 


DOM 


Document Object Model 


The DOM (Document Object Model) API is a programming interface for web 
documents. It represents the page so that programs can change the document 
structure, style, and content. The DOM represents the document as a tree of 
objects; each object represents a part of the page. 


What was Javascript? 


It was an implementation of the ECMAScript spec 


0010101010101 
0101010101010 
1101010100101 
1010101010100 


What was Javascript? 


But the Javascript that runs in your browser has some extra functionality 


console.log("Hi!"); 


setTimeout(function timeout() 1 
console.log("Click the button!"); 
+, 5000); 


timeout() 


console.log("Welcome to loupe.”); 


What was Javascript? 


But the Javascript that runs in your browser has some extra functionality 


Browser JS 


What was Javascript? 


But the Javascript that runs in your browser has some extra functionality 


NodeJS 


What was Javascript? 


But the Javascript that runs in your browser has some extra functionality 


Browser JS 


Today we will focus on this 


What was Javascript? 


But the Javascript that runs in your browser has some extra functionality 


Browser JS 


This we have sort of covered 


What was Javascript? 


But the Javascript that runs in your browser has some extra functionality 


Browser JS 


This is what we're covering today 


DOM / Document object 


100 


200 
Lets create a simple website to calculate the sum of 


two numbers 


| Calculate sum | 


This is a static website, clicking the button 
does nothing 


DOM / Document object 


100 


But making them dynamic ts hard | 200 
What do | mean, when | say dynamic - | 
1. Changing the elements on the website once the website is loaded 


2. Actually calculating the sum based on the inputs and rendering 
it on the screen 


| Calculate sum | 


Sum is 300 


DOM / Document object 


Classes and ids 


Lets say we want to have the similar divs in two places 


E index.html © x + *- (J) Webview x «P Shell x + 


index.html € > CE > 2 Devtools @ New tab 


<!DOCTYPE html> 
v <html> hi there 


1 

2 

3 

4 ~ «body» 

Sy <div|style="background-color: red; margin: 10px; padding: 10px;"> 
6 

7 

8 

9 


hi there 2 


hi there 
</div> 


v <div style="background-color: red; margin: 10px; padding: 10px;" 
10 hi there 2 
11 </div> 
12 </body> 
13 
14 </html> 


g 
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index.html (& x + 
index.html 


<!DOCTYPE html» 
<html> 
<style> 


container { 
background-color: red; 


margin: 10px; 
padding: 10px; 


< 


< 


< 


i; 
</style> 


v <body> 
hi there 
«/div» 


v <div classz"container" 
hi there 2 
«/div» 
«/body» 


«/html» 


DOM / Document object 


Classes 


CJ Webview x WW Shell 


€ > CE 


hi there 


hi there 2 


X 


1y æ J 


> # Devtools (7 New tab 


DOM / Document object 


Ids are supposed to be unique. They are used to uniquely identify a div/span/input/button 


El index.html © x + ** [D Webview x Q Shell x + 
index.html € > QJ > Æ Devtools (7 New tab 
1 <!DOCTYPE html» 

2 y <html> hi there 
3, «style» 

4,  .container 4 taro) 
5 background-color: red; 

6 margin: 10px; 

7 padding: 10px;x 

8 } 

9 </style> 

10 

11 , <body> 

12, «div class="container" 

13 hi there 

14 «/div» 

15 

16, «div class="container" 

17 hi there 2 

18 «/div» 

19 </body> 

20 

21 </html> 


DOM / Document object 


Why are Ids useful? 
Classes let you get rid of code repetition 
But what do ids do? 


DOM / Document object 


They let you access elements via the DOM API 
Can you use ids to do CSS? - Yes 
But what do you use it for usually - Javascript 


DOM / Document object 


Lets say I ask you to log the values in these inputs 


100 


200 


| Calculate sum | 


sum is 300 


DOM / Document object 


Lets say I ask you to log the values in these inputs 


KA 100 


200 
Here is where the global document object 


Comes into the picture 


| Calculate sum | 


sum is 300 


DOM / Document object 


document.getElementByld 
document.getElementsByClassName 


Lets complete this assignment 


100 


200 


| Calculate sum | 


Sum is 300 


Now, lets say you don't have access to the calculation logic on the frontend 
Lets assume its a hard problem that someone has exposed on a backend server 
And you need to hit the backend server and get back the value 


Give me sum of 100, 200 


300 


Backend server 


https://sum-server.100xdevs.com/sum?a=1&b=2 


Harder assignment 


https://sum-server.100xdevs.com/interest?principal=100&rate=5&time=2 


